<template>
  <view class="container">
    <!-- 使用 v-for 指令来循环渲染内容 -->
    <template v-if="dataList.length > 0">
      <view class="content" v-for="(item, id) in dataList" :key="id" @click="navigateToStrategy(item)">
        <view class="item-header">
          <text class="place-name">{{ item.place_name }}</text>
          <view class="rating-icon">
            <text class="rating-text">{{ item.num }}</text>
            <image :src="item.image" mode="widthFix" class="star-icon"></image>
          </view>
        </view>
        <view class="item-main">
          <view class="item-img">
            <image :src="item.image" mode="widthFix" class="item-image"></image>
          </view>
          <view class="item-info">
            <view class="item-nav">
              <text class="nav-text">城市：{{ item.city }}--{{ item.place_name }}</text>
            </view>
            <text class="info-text">简介: {{ item.easy_all }}</text>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="no-data">暂无相关数据，请稍后重试。</view>
    </template>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { UniAdapter } from 'uniapp-axios-adapter';

// 创建 Axios 实例并配置适配器
const instance = axios.create({
  adapter: UniAdapter,
  timeout: 10000, // 设置超时时间
  baseURL: 'http://127.0.0.1:8081' 
});

// 定义响应式数据
const startPlace = ref(''); // 出发地
const endPlace = ref(''); // 目的地
const dataList = ref([]); // 存储后端返回的数据

// 获取本地存储中的 CSRF 令牌
const getCSRFToken = () => {
  return uni.getStorageSync('csrftoken');
};

// 保存 CSRF 令牌到本地存储
const saveCSRFToken = (token) => {
  uni.setStorageSync('csrftoken', token);
};

// 跳转至攻略详情页
const navigateToStrategy = (item) => {
  uni.navigateTo({
    url: `/pages/strategypage/detailStrategy?startPlace=${encodeURIComponent(startPlace.value)}&place_name=${encodeURIComponent(item.place_name)}&city=${encodeURIComponent(item.city)}&all=${encodeURIComponent(item.all)}&image=${encodeURIComponent(item.image)}`
  });
  console.log('页面跳转成功！', item.place_name, item.all, item.city, startPlace.value, item.image);
};

onMounted(() => {
  const options = uni.getStorageSync('pageOptions'); // 假设 options 从 storage 中获取，实际需根据情况修改
  console.log('接收到的参数:', options);
  // 对参数进行解码
  startPlace.value = options.startPlace ? decodeURIComponent(options.startPlace) : '';
  endPlace.value = options.endPlace ? decodeURIComponent(options.endPlace) : '';
  console.log('赋值后的出发地:', startPlace.value);
  console.log('赋值后的目的地:', endPlace.value);

  // 构建动态 URL
  const apiUrl = `/places/?city1=${encodeURIComponent(startPlace.value)}&city2=${encodeURIComponent(endPlace.value)}`;

  // 获取 CSRF 令牌（如果需要）
  let csrftoken = getCSRFToken();

  // 使用 Axios 实例发送请求
  instance.get(apiUrl, {
    headers: {
      'X-CSRFToken': csrftoken
    }
  })
  .then(response => {
    console.log('请求成功:', response.data);
    // 检查响应头中是否有新的 CSRF 令牌
    const newCSRFToken = response.headers['x-csrftoken'];
    if (newCSRFToken) {
      saveCSRFToken(newCSRFToken);
    }
    if (Array.isArray(response.data)) {
      dataList.value = response.data; // 假设返回的数据是攻略列表
      console.log(dataList.value);
    } else {
      console.error('后端返回的数据不是数组格式:', response.data);
    }
  })
  .catch(error => {
    console.error('请求失败:', error);
  });
});
</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 20px;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 每个攻略项的样式 */
.content {
  width: 100%;
  max-width: 650px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.content:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

/* 标题样式 */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #dee2e6;
}

.place-name {
  font-size: 26px;
  font-weight: bold;
  color: #343a40;
}

.rating-icon {
  display: flex;
  align-items: center;
}

.rating-text {
  font-size: 18px;
  color: #ffc107;
  font-weight: bold;
  margin-right: 5px;
}

.star-icon {
  width: 20px;
  height: 20px;
}

/* 主要内容区域样式 */
.item-main {
  display: flex;
  padding: 15px 20px;
}

/* 图片样式 */
.item-img {
  width: 30%; /* 缩小图片宽度 */
  margin-right: 20px;
}

.item-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.item-image:hover {
  transform: scale(1.05);
}

/* 信息区域样式 */
.item-info {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-nav {
  margin-bottom: 10px;
}

.nav-text {
  font-size: 16px;
  color: #6c757d;
}

.info-text {
  font-size: 16px;
  color: #495057;
  line-height: 1.6;
}

/* 无数据提示样式 */
.no-data {
  font-size: 18px;
  color: #999;
  text-align: center;
  padding: 20px;
}
</style>